<#include "../../common/_header.htm">
<script src="${ctx}/plugins/d3/js_re/D3ForceService.js"></script>
<script src="${ctx}/plugins/d3/js_re/saveSvgAsPng.js"></script>
<style>
	.fl{float:left;}
	.d3-toolbox{display:block;position:fixed;left:19px;top:15px;width:220px;min-height:100px;border:1px solid #ddd;background:#fff;}
	.d3-viewbox{margin:11px;float:left;}
	.d3-viewbox3{margin:11px 11px 0 11px;float:left;}
	.d3-viewbox2{padding:5px;margin:5px;float:left;border:1px solid #ddd;}
	.d3-view-type{float:left;width:60px;height:24px;line-height:24px;border:1px solid #ddd;color:#000;font-family:微软雅黑;margin-left:5px;border-radius:3px;display: block;text-align:center;cursor:pointer;}
	.d3-view-type:hover{border:none;color:#fff;background:#52a1fe;}
	.d3-view-type.current{border:none;color:#fff;background:#52a1fe;cursor:auto;}
	.d3-purple{float:left;width:90px;height:16px;color:#fff;background:#7200da;}
	.d3-yellow{float:left;width:90px;height:16px;color:#fff;background:#f9c00c;}
	.d3-blue{float:left;width:90px;height:16px;color:#fff;background:#007efe;}
	.d3-money{float:left;margin:5px 0;}
	.d3-money input{width:100px;border:1px solid #ddd;}
	.d3-button{width:85px;height:30px;line-height:30px;color:#fff;background:#52a1fe;font-family:微软雅黑;border-radius:3px;display: block;text-align:center;cursor:pointer;}
	.link {fill: none;stroke: #ccc;stroke-width: 1.5px;}
	.dc {margin-left:5px;}
</style>
<div style="width:100%;height:100%;">
	<div class="casemanage-switchtip">
	    <div class="active" onclick="changeF(false,this)" title="交易关系图-开启力导向">
	        <i class="ldx"></i>
	    </div>
	    <div onclick="changeF(true,this)" title="交易关系图-关闭力导向">
	        <i class="gxt"></i>
	    </div>
	    <div title="导出图片" id="dc">
	        <i class="dc"></i>
	    </div>
	</div>
	<div id="hidebox" style="width:100%;height:100%;">
	</div>
</div>
<script>
	var d3view = new d3ForceService();
	$(function() {
		d3view.linetextCallback=function(t){
			let name1 = t.source.name;
			let name2 = t.target.name;
			let param = data;
			param.name1 = name1;
			param.name2 = name2;
	        var d = top.dialog({
	            title : '账单明细详情',
	            modal : true,
	            url : '${ctx}/bill/tj/detailD3Dialog',
	            height : 800,
	            width : 1500,
	            data : param,
	            onshow : function () {
	            }
	        });
	        d.show();
	        return false;
		}

	    $(".set-d3box").click(function(){
	        $(".d3-toolbox").fadeToggle(500);
	    })
	    $("#dc").click(function(){
	    	d3view.scale_var=1
			d3view.translate_var=new Array(0,0);
			d3view.zoom.translate(d3view.translate_var);
			d3view.zoom.scale(d3view.scale_var);
			d3view.svg.attr("transform", "translate(" + d3view.translate_var + ")scale(" + d3view.scale_var + ")");
			
			if(d3view.theMinx<0) d3view.translate_var[0]=100-d3view.theMinx;
			if(d3view.theMiny<0) d3view.translate_var[1]=100-d3view.theMiny;
			
			d3view.svg.attr("transform", "translate(" + d3view.translate_var + ")scale(" + d3view.scale_var + ")");
			saveSvgAsPng($("svg")[0], "相互通话分析图.png",{height:(d3view.theMaxx-d3view.theMinx+400),width:(d3view.theMaxy-d3view.theMiny+400)});
	    })
		
		/** 回去传值 **/
		var dialog = top.dialog.get(window);
	    var data = dialog.data; // 获取对话框传递过来的数据
	    $.ajax({
		    type : 'post',
		    async :true,
		    data: data,
		    url : data.reqUrl,
		    dataType: 'json',
		    success:function (result) {
	            if(result.nodes.length){
	            	d3view.reload(result.nodes,result.links,"#hidebox");
	            }else{
	            }
		    }
		});
	    $(document).on("click","#refresh",function(){
			d3view.refresh();
		});
	    
	});
   function changeF(flag,obj){
	   	$(obj).siblings(".active").removeClass("active");
	   	$(obj).addClass("active");
	   	d3view.DoChangeForce(flag);
   }
</script>

<style>
	#hidebox {
		top: 23px;
		left: 2%;
		border-radius: 5px;
		background-color:#fff;
		z-Index:9999;
		padding: 10px;
		overflow:hidden;
	}
	
	.casemanage-switchtip div i.gxt {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/gxt.png) 0% 0% / 15px 15px no-repeat;}
	.casemanage-switchtip div i.sjz {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/sjz.png) 0% 0% / 15px 15px no-repeat;}
	.casemanage-switchtip div i.zzjg {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/zzjg.png) 0% 0% / 15px 15px no-repeat;}
	.casemanage-switchtip div i.dc {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/dc.png) 0% 0% / 15px 15px no-repeat;}
	.casemanage-switchtip div i.ldx {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/ldx.png) 0% 0% / 15px 15px no-repeat;}
	.casemanage-switchtip div.active i.gxt {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/gxth.png) 0% 0% / 15px 15px no-repeat;}
	.casemanage-switchtip div.active i.sjz {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/sjzh.png) 0% 0% / 15px 15px no-repeat;}
	.casemanage-switchtip div.active i.zzjg {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/zzjgh.png) 0% 0% / 15px 15px no-repeat;}
	.casemanage-switchtip div.active i.ldx {margin-left: 10px;margin-top: 5px;background: url(${ctx}imgs/cut-imgs/ldxh.png) 0% 0% / 15px 15px no-repeat;}
	.dropdown-menu .nav-header{padding:15px;background:none}
	.casemanage-switchtip{background:#fff;}
	.casemanage-switchtip div{width:34px;}
	.casemanage-switchtip div i{margin-left: 10px!important;}
</style>
</body>
</html>